<template>
  <!-- 第一列头部导航栏 -->
  <div class="header">
    <!-- logo和子系统标签栏 -->
    <div class="leftPart">
      <div class="space"></div>
      <el-image
        title="首页"
        @click="navigateTo('/home')"
        style="width: 28px; height: 28px"
        :src="logoImg"
        fit="fill"
      />

      <div class="space"></div>
      <div class="slider"></div>
      <div class="space"></div>

      <!-- 子系统标签栏 -->
      <div class="topTabs" id="topTabsBar" v-show="loginStatus">
        <div
          :class="dropIndex == index ? 'tab dropTab' : 'tab'"
          v-for="(item, index) in tabList"
          :key="item.id"
          :id="item.id == currentTabId ? 'currentTab' : ''"
          :title="item.description"
          @click="navigateTo(item.path, item.id)"
          :draggable="true"
          :ondrop="() => ondrop(index)"
          :ondrag="() => ondrag(index)"
          :ondragover="(ev:any) => ondragover(ev, index)"
          :onDragend="() => (dropIndex = null)"
          :onDragleave="() => (dropIndex = null)"
        >
          <el-avatar :size="22" :src="item.image" />
          <div class="space"></div>
          <div class="title">{{ item.name }}</div>
          <div class="space"></div>
          <div class="space"></div>
          <div class="close" @click.stop="deleteTabItem(item.id)">
            <el-icon><Close /></el-icon>
          </div>
          <div class="space"></div>
          <div class="slider"></div>
        </div>
      </div>
    </div>

    <!-- 预留可拖拽区域 -->
    <div class="centerBlankSpace" id="centerBlankSpace">
      <div class="mask" v-show="showMask"></div>
    </div>

    <div class="rightPart">
      <!-- 用户信息 -->
      <div class="userInfo">
        <el-dropdown @command="handleCommand">
          <div style="display: flex; align-items: center" title="个人信息">
            <el-avatar :size="26" :src="avatar || avatarSvg" />
          </div>

          <template #dropdown v-if="loginStatus">
            <el-dropdown-menu>
              <el-dropdown-item command="none" disabled>
                <div style="display: flex; font-weight: bold">
                  <el-avatar :size="20" :src="avatar || avatarSvg" />
                  <div
                    style="
                      color: #252525;
                      font-size: 17px;
                      margin-left: 4px;
                      margin-right: 10px;
                    "
                  >
                    {{ nickname }}
                  </div>
                  <div style="font-size: 13px; color: #909399">
                    @{{ account }}
                  </div>
                </div>
              </el-dropdown-item>

              <el-dropdown-item command="userPage" divided>
                <i class="icon-user-3-line" style="font-size: 18px"></i>
                <span style="margin-left: 10px">个人主页</span>
              </el-dropdown-item>

              <el-dropdown-item command="logout" divided>
                <i class="icon-user-shared-2-line" style="font-size: 18px"></i>
                <span style="margin-left: 10px">退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <div class="space"></div>

      <!-- 功能菜单 -->
      <div class="operationMenu">
        <el-dropdown @command="handleCommand" v-if="loginStatus">
          <div style="display: flex; align-items: center" title="功能菜单">
            <el-icon size="22" color="#deeeef"><Operation /></el-icon>
          </div>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                command="userManage"
                divided
                v-if="judgeHasRoute('/userManage')"
              >
                <el-icon size="18"><UserFilled /></el-icon>
                <span style="margin-left: 10px">用户管理</span>
              </el-dropdown-item>
              <el-dropdown-item
                command="roleManage"
                v-if="judgeHasRoute('/roleManage')"
              >
                <el-icon size="18"><Avatar /></el-icon>
                <span style="margin-left: 10px">角色管理</span>
              </el-dropdown-item>
              <el-dropdown-item
                command="permissionManage"
                v-if="judgeHasRoute('/permissionManage')"
              >
                <el-icon size="18"><SetUp /></el-icon>
                <span style="margin-left: 10px">权限管理</span>
              </el-dropdown-item>
              <el-dropdown-item
                command="pageManage"
                v-if="judgeHasRoute('/pageManage')"
              >
                <el-icon size="18"><Guide /></el-icon>
                <span style="margin-left: 10px">路由管理</span>
              </el-dropdown-item>
              <el-dropdown-item
                command="systemManage"
                v-if="judgeHasRoute('/systemManage')"
              >
                <el-icon size="18"><Grid /></el-icon>
                <span style="margin-left: 10px">系统管理</span>
              </el-dropdown-item>
              <el-dropdown-item
                command="sortManage"
                v-if="judgeHasRoute('/sortManage')"
              >
                <el-icon size="18"><DCaret /></el-icon>
                <span style="margin-left: 10px">分类管理</span>
              </el-dropdown-item>
              <el-dropdown-item
                command="logManage"
                v-if="judgeHasRoute('/logManage')"
              >
                <el-icon size="18"><Histogram /></el-icon>
                <span style="margin-left: 10px">系统日志</span>
              </el-dropdown-item>

              <el-dropdown-item
                command="ipControl"
                divided
                v-if="judgeHasRoute('/ipControlManage')"
              >
                <i class="icon-map-pin-user-fill" style="font-size: 18px"></i>
                <span style="margin-left: 10px">IP管理</span>
              </el-dropdown-item>
              <el-dropdown-item
                command="rejectionRecord"
                v-if="judgeHasRoute('/rejectionRecordManage')"
              >
                <i class="icon-alert-line" style="font-size: 18px"></i>
                <span style="margin-left: 10px">拒绝记录</span>
              </el-dropdown-item>

              <el-dropdown-item
                command="aiServiceRecord"
                divided
                v-if="judgeHasRoute('/aiServiceRecord')"
              >
                <i class="icon-mental-health-fill" style="font-size: 18px"></i>
                <span style="margin-left: 10px">AI服务日志</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <div class="space"></div>
      <div class="slider"></div>
      <div class="space"></div>

      <!-- 控制窗口按钮 -->
      <div class="controlBtns">
        <div>
          <el-icon @click="minWindow" title="最小化"><Minus /></el-icon>
        </div>
        <div>
          <el-icon @click="toggleMaxWindow" title="最大化">
            <FullScreen />
          </el-icon>
        </div>
        <div>
          <el-icon @click="closeWindow" title="关闭窗口"><Close /></el-icon>
        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>

  <!--  -->
  <!--  -->
  <!-- 第二列功能按钮栏 -->
  <div class="funcBar">
    <!-- 返回按钮 -->
    <div class="leftPart">
      <div class="space"></div>
      <div class="hoverBox" title="后退" @click="router.go(-1)">
        <div class="space"></div>
        <el-icon size="22"><Back /></el-icon>
        <div class="space"></div>
      </div>
      <!-- <div class="hoverBox" title="前进" @click="router.go(1)">
        <div class="space"></div>
        <el-icon size="22"><Right /></el-icon>
        <div class="space"></div>
      </div> -->
      <div class="hoverBox" title="首页" @click="navigateTo('/home')">
        <div class="space"></div>
        <el-icon size="22"><HomeFilled /></el-icon>
        <div class="space"></div>
      </div>
      <div class="space"></div>
    </div>

    <!-- 中间输入框 -->
    <div class="centerPart" v-if="loginStatus">
      <ConsumeRouteInput :currentPath="currentPath?.path"> </ConsumeRouteInput>
    </div>

    <div class="space"></div>

    <!-- 偏右的app历史访问路径列表 -->
    <div
      class="appAccessPathList"
      v-if="loginStatus && currentAppHistoryPath.length > 0"
    >
      <ConsumeAppAccessPath
        :currentAppHistoryPath="currentAppHistoryPath"
      ></ConsumeAppAccessPath>
    </div>

    <!-- 功能按钮 -->
    <div class="rightPart">
      <div class="space"></div>
      <div
        class="hoverBox"
        title="AI服务管理"
        v-if="judgeHasRoute('/aiService')"
        @click="navigateTo('/aiService')"
      >
        <div class="space"></div>
        <i class="icon-mental-health-line" style="font-size: 22px"></i>
        <div class="space"></div>
      </div>

      <div
        class="hoverBox"
        title="IP访问管理"
        v-if="judgeHasRoute('/accessIpManage')"
        @click="navigateTo('/accessIpManage')"
      >
        <div class="space"></div>
        <i class="icon-shield-user-line" style="font-size: 22px"></i>
        <div class="space"></div>
      </div>

      <div
        class="hoverBox"
        title="权限管理"
        v-if="judgeHasRoute('/authorityControl')"
        @click="navigateTo('/authorityControl')"
      >
        <div class="space"></div>
        <i class="icon-list-settings-line" style="font-size: 22px"></i>
        <div class="space"></div>
      </div>

      <div class="hoverBox" title="更多设置以及其他" @click="openCustomDialog">
        <div class="space"></div>
        <el-icon><MoreFilled /></el-icon>
        <div class="space"></div>
      </div>
      <div class="space"></div>
      <div class="space"></div>
    </div>

    <Consume-Dialog :visible="consumeDialogPropsVisible"></Consume-Dialog>
  </div>
</template>

<script lang="tsx" setup>
import { ref, onMounted, defineComponent, watch, Transition } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import {
  Minus,
  FullScreen,
  Close,
  Back,
  // Right,
  MoreFilled,
  HomeFilled,
  Operation,
  Avatar,
  Tools,
  Histogram,
  Guide,
  DCaret,
  UserFilled,
  SetUp,
  Grid,
  Warning,
  DArrowLeft,
  DArrowRight,
} from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/features/store/store'
import { useTabStore, useRouterHistoryStore } from '@/features/store/tabStore'
import { logoutApi } from '@/request/api/user'
import logoImg from '@/assets/images/centerSystem.png'
import avatarSvg from '@/assets/images/404.svg'
import styles from './header.module.less'
import { controlWindow } from '@/utils/electronFunc'

const router = useRouter()

const { avatar, nickname, account, loginStatus } = storeToRefs(useUserStore())
const { judgeHasRoute } = useUserStore()
const { tabList, currentTabId, currentAppHistoryPath } = storeToRefs(
  useTabStore()
)
const { deleteTabItem, setCurrentTabId } = useTabStore()
const { currentPath } = storeToRefs(useRouterHistoryStore())

// 最小化窗口
const minWindow = () => controlWindow.minWindow()
// 切换最大化窗口
const toggleMaxWindow = () => controlWindow.maxWindow()
// 关闭窗口
const closeWindow = () => controlWindow.closeWindow()

// 路由跳转
const navigateTo = (path: string, id: string = null) => {
  router.push(path)
  if (id) setCurrentTabId(id)
}

// 是否显示一个遮罩
const showMask = ref<boolean>(false)

onMounted(() => {
  // 获取容器元素
  const container = document.getElementById('topTabsBar')

  // 监听容器的滚动事件
  container?.addEventListener('wheel', function (event: any) {
    // 阻止默认的滚动行为
    event.preventDefault()
    // 滚动的距离，根据滚动方向确定
    let delta = event.deltaY || event.detail || -event.wheelDelta

    // 设置容器的滚动位置
    container.scrollLeft += delta
  })

  // 获取容器元素
  let container2 = document.getElementById('centerBlankSpace')

  // 创建 ResizeObserver 实例
  let observer = new ResizeObserver(function (entries) {
    for (let entry of entries) {
      // 获取容器的新宽度
      let newWidth = entry.contentRect.width
      // console.log('容器的新宽度：', newWidth)
      if (newWidth === 100) showMask.value = true
      else showMask.value = false
    }
  })

  // 开始监听容器元素的宽度变化
  observer.observe(container2)
})

// 拖拽标签相关。。。
const dragIndex = ref<number>(null)
const dropIndex = ref<number>(null)

const ondrop = (index: number) => {
  let array = [...tabList.value]
  const val = tabList.value[dragIndex.value]

  array.splice(dragIndex.value, 1)
  array.splice(index, 0, val)

  useTabStore().setTagList(array)
}
const ondrag = (index: number) => (dragIndex.value = index)
const ondragover = (event: any, index: number) => {
  event.preventDefault()
  dropIndex.value = index
}

// 下来菜单点击事件
const handleCommand = (command: string | number) => {
  // 退出登录
  const logout = async () => {
    const res = await logoutApi()
    if (res.code !== 200) return ElMessage.error('退出失败！')
    useUserStore().setLoginStatus()
    window.localStorage.clear()
    router.push('/loginRedirect')
  }

  const optionFunc: { [key: string | number]: Function } = {
    none: () => '',
    userPage: () => navigateTo('/user'),
    userManage: () => navigateTo('/userManage'),
    roleManage: () => navigateTo('/roleManage'),
    permissionManage: () => navigateTo('/permissionManage'),
    pageManage: () => navigateTo('/pageManage'),
    systemManage: () => navigateTo('/systemManage'),
    sortManage: () => navigateTo('/sortManage'),
    logManage: () => navigateTo('/logManage'),
    ipControl: () => navigateTo('/ipControlManage'),
    rejectionRecord: () => navigateTo('/rejectionRecordManage'),
    aiServiceRecord: () => navigateTo('/aiServiceRecord'),
    logout: () => logout(),
  }

  optionFunc[command]()
}

//
// 自定义弹出框 props
const consumeDialogPropsVisible = ref<boolean>(false)
const openCustomDialog = () => {
  consumeDialogPropsVisible.value = !consumeDialogPropsVisible.value
}
//
// 自定义弹出框组件
const ConsumeDialog = defineComponent({
  props: {
    visible: { type: Boolean, default: false },
  },
  setup(props) {
    return () => (
      <div class={styles.box} v-show={props.visible}>
        <div class={styles.item}>
          <div class={styles.right}>
            <el-icon>
              <Tools />
            </el-icon>
            <span>设置</span>
          </div>
          <div class={styles.left}>快捷键</div>
        </div>
      </div>
    )
  },
})

//
//
// 自定义路由路径输入框组件
const ConsumeRouteInput = defineComponent({
  props: {
    currentPath: { type: String, default: null },
  },
  setup(props) {
    const router = useRouter()
    const { getLatestPath, getMaxCountPath, deletePathItem } =
      useRouterHistoryStore()

    // 最新路径
    const latestPathList = ref<any[]>([])
    // 最常访问路径
    const maxCountPathList = ref<any[]>([])

    // 输入框路径 path 的值
    const routePath = ref<string>('')
    // 是否显示下拉列表
    const showPathList = ref<boolean>(false)

    // 锁
    const lock = ref<boolean>(false)
    // 定时器
    const timer = ref<number>(null)

    watch(
      () => props.currentPath,
      () => {
        routePath.value = props.currentPath

        // lock.value = false
        // setTimeout(() => (showPathList.value = false), 200)
      }
    )

    onMounted(() => {
      routePath.value = props.currentPath

      const routePathInput = document.getElementById('routePathInput')
      inputHandleInit(routePathInput)
    })

    // 初始化一下input框的事件
    const inputHandleInit = (elementObj: HTMLElement) => {
      // 获取焦点事件
      elementObj.onfocus = function () {
        if (lock.value) return

        showPathList.value = true
        latestPathList.value = getLatestPath(5)
        maxCountPathList.value = getMaxCountPath(5)
      }

      // 失去焦点事件
      elementObj.onblur = function () {
        routePath.value = props.currentPath

        if (lock.value) return

        // @ts-ignore
        timer.value = setTimeout(() => (showPathList.value = false), 300)
      }

      // 键盘回车事件
      elementObj.onkeydown = function (event) {
        if (event.key == 'Enter') navigateTo(routePath.value)
      }
    }

    // 给操作上锁
    const lockHandle = () => {
      lock.value = !lock.value
      clearTimeout(timer.value)
      document.getElementById('routePathInput').focus()
    }

    // 跳转
    const jumper = (path: string) => router.push(path)

    // 删除路径
    const deletePath = async (path: string) => {
      await deletePathItem(path)
      latestPathList.value = getLatestPath(5)
      maxCountPathList.value = getMaxCountPath(5)
    }

    return () => (
      <>
        {/* input 路径输入框 */}
        <div class={styles.routePathInputContainer}>
          <div style={{ width: '10px', height: '100%' }}></div>

          <el-icon
            title="锁定操作"
            size={20}
            color={lock.value ? '#EBC67B' : ''}
            onClick={lockHandle}
          >
            <Warning />
          </el-icon>

          <input
            id="routePathInput"
            class={styles.routePathInput}
            v-model={routePath.value}
          />
        </div>

        {/* 路径列表 */}
        <Transition
          enterFromClass={styles.fade_enter_from}
          leaveToClass={styles.fade_leave_to}
          enterActiveClass={styles.fade_enter_active}
          leaveActiveClass={styles.fade_leave_active}
          enterToClass={styles.fade_enter_to}
          leaveFromClass={styles.fade_leave_from}
        >
          <div class={styles.routePathList} v-show={showPathList.value}>
            <div
              class={styles.divideTitle}
              v-show={maxCountPathList.value.length > 0}
            >
              最新访问
            </div>
            {latestPathList.value.map((item) => {
              return (
                <div class={styles.pathItem}>
                  <div class={styles.path} onClick={() => jumper(item.path)}>
                    {item.path}
                  </div>
                  <div class={styles.time}>{item.time}</div>
                  <div
                    class={styles.close}
                    onClick={() => deletePath(item.path)}
                  >
                    <el-icon size="22">
                      <Close />
                    </el-icon>
                  </div>
                </div>
              )
            })}

            <div
              class={styles.divideTitle}
              v-show={maxCountPathList.value.length > 0}
            >
              最常访问
            </div>
            {maxCountPathList.value.map((item) => {
              return (
                <div class={styles.pathItem}>
                  <div class={styles.path} onClick={() => jumper(item.path)}>
                    {item.path}
                  </div>
                  <div class={styles.time}>{item.time}</div>
                  <div
                    class={styles.close}
                    onClick={() => deletePath(item.path)}
                  >
                    <el-icon size="22">
                      <Close />
                    </el-icon>
                  </div>
                </div>
              )
            })}
          </div>
        </Transition>
      </>
    )
  },
})

//
//
//  当前应用访问路径列表
const ConsumeAppAccessPath = defineComponent({
  props: {
    currentAppHistoryPath: { type: Array, default: false },
  },
  setup(props) {
    const currentAppHistoryPath = ref<any[]>([])

    const router = useRouter()
    // 路由跳转
    const navigateTo = (path: string) => router.push(path)

    onMounted(() => {
      currentAppHistoryPath.value = props.currentAppHistoryPath

      // 获取容器元素
      const pathContainer = document.getElementById('appAccessPath')

      // 监听容器的滚动事件
      pathContainer.addEventListener('wheel', function (event: any) {
        // 阻止默认的滚动行为
        event.preventDefault()
        // 滚动的距离，根据滚动方向确定
        let delta = event.deltaY || event.detail || -event.wheelDelta

        // 设置容器的滚动位置
        pathContainer.scrollLeft += delta
      })
    })

    watch(
      () => props.currentAppHistoryPath,
      () => {
        const tempLen = currentAppHistoryPath.value.length
        currentAppHistoryPath.value = props.currentAppHistoryPath
        // console.log('currentAppHistoryPath', currentAppHistoryPath.value)

        if (tempLen <= currentAppHistoryPath.value.length) {
          const pathContainer = document.getElementById('appAccessPath')
          pathContainer.scrollLeft = 0
        }
      }
    )

    // 滚动滑块栏
    const setStep = (delta: number) => {
      const el = document.getElementById('appAccessPath')
      if (!el) return

      const current = el.scrollLeft
      const maxScroll = el.scrollWidth - el.clientWidth
      const next = Math.max(0, Math.min(current + delta, maxScroll))

      el.scrollTo({ left: next, behavior: 'smooth' })
    }

    return () => (
      <div class={styles.appAccessPath} id="appAccessPath">
        <div
          class={styles.arrowLeft}
          title="向左滚动"
          onClick={() => setStep(-100)}
        >
          <el-icon size="22">
            <DArrowLeft />
          </el-icon>
        </div>

        {currentAppHistoryPath.value.map((item) => {
          return (
            <div class={styles.pathItem}>
              <span class={styles.label} onClick={() => navigateTo(item.path)}>
                {item.name}
              </span>
              <i
                class="icon-close-circle-line"
                style={{ 'font-size': '18px' }}
                onClick={() => useTabStore().deleteAppHistoryPath(item.path)}
              ></i>
            </div>
          )
        })}

        <div
          class={styles.arrowRight}
          title="向右滚动"
          onClick={() => setStep(100)}
        >
          <el-icon size="22">
            <DArrowRight />
          </el-icon>
        </div>
      </div>
    )
  },
})
</script>

<style lang="less" scoped>
.slider {
  width: 1px;
  height: 60%;
  background-color: #7d7474;
  margin-left: 2px;
  margin-right: 2px;
  border-radius: 9px;
  user-select: none;
  -webkit-app-region: no-drag;
}

.space {
  width: 10px;
  height: 50%;
  user-select: none;
  -webkit-app-region: no-drag;
}

.header {
  width: 100vw;
  height: 32px;
  background-color: var(--theme-header-background);
  -webkit-app-region: drag;
  display: flex;
  justify-content: space-between;

  > .leftPart {
    height: 100%;
    max-width: calc(100vw - 100px - 250px);
    display: flex;
    align-items: center;
    -webkit-app-region: no-drag;

    > .topTabs {
      height: 100%;
      max-width: calc(100% - 70px);
      padding-right: 10px;
      -webkit-app-region: no-drag;
      display: flex;
      align-items: center;
      overflow-x: auto;
      user-select: none;
      position: relative;

      &::-webkit-scrollbar {
        display: none;
      }

      > .dropTab {
        position: relative;
        &::before {
          content: '';
          height: 100%;
          width: 100%;
          background-color: #5c63dc53;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      > .tab {
        display: flex;
        align-items: center;
        height: 100%;
        max-width: 260px;
        padding-left: 10px;
        padding-right: 4px;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
        cursor: pointer;

        &:hover {
          background-color: var(--theme-header-hover);
        }

        > .title {
          min-width: 140px;
          max-width: 180px;
          text-wrap: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
        }

        > .close {
          border-radius: 4px;
          display: flex;
          padding: 1px;
          align-items: center;
          &:hover {
            background-color: #7e7e7e83;
          }
        }
      }
      > #currentTab {
        background-color: var(--theme-header-active);
        box-shadow: 0px 0 1px 1px #e0e0e0;
      }
    }
  }

  > .centerBlankSpace {
    flex: 1;
    height: 100%;
    min-width: 100px;
    z-index: 10;
    -webkit-app-region: drag;
    position: relative;

    > .mask {
      position: absolute;
      top: 0;
      left: -30px;
      width: 50px;
      height: 100%;
      -webkit-app-region: no-drag;
      background-image: linear-gradient(
        to right,
        #ffffff18,
        var(--theme-header-background)
      );
    }
  }

  > .rightPart {
    min-width: 250px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    > .operationMenu {
      display: flex;
      align-items: center;
      cursor: pointer;
      -webkit-app-region: no-drag;
    }

    > .userInfo {
      display: flex;
      align-items: center;
      cursor: pointer;
      -webkit-app-region: no-drag;
    }

    > .controlBtns {
      user-select: none;
      -webkit-app-region: no-drag;
      display: flex;
      align-items: center;

      > div {
        margin-left: 6px;
        margin-right: 6px;
        padding: 5px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        > *:hover {
          font-weight: bold;
          color: white;
          scale: 1.1;
        }
      }

      > div:nth-child(1) {
        background-color: #68e380;
        color: #68e380;
        &:hover {
          background-color: #72dc87;
        }
      }
      > div:nth-child(2) {
        background-color: #fdd465;
        color: #fdd465;
        &:hover {
          background-color: #fadb84;
        }
      }
      > div:nth-child(3) {
        background-color: #fe8e84;
        color: #fe8e84;
        &:hover {
          background-color: #fa9d95;
        }
      }
    }
  }
}

.funcBar {
  width: 100vw;
  height: 36px;
  -webkit-app-region: no-drag;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  .hoverBox {
    height: calc(100% - 8px);
    display: flex;
    align-items: center;
    border-radius: 3px;
    transition: all 0.3s;
    &:hover {
      background-color: #94929232;
      cursor: pointer;
    }
  }

  > .leftPart {
    height: 100%;
    // min-width: 150px;
    // min-width: 100px;
    display: flex;
    align-items: center;
  }

  > .rightPart {
    height: 100%;
    display: flex;
    align-items: center;
  }

  > .centerPart {
    flex: 1;
    height: calc(100% - 8px);
    background-color: #f8f8f8;
    border-radius: 18px;
    display: flex;
    align-items: center;
    letter-spacing: 2px;
    color: gray;
    font-size: 15px;
    position: relative;
  }

  > .appAccessPathList {
    flex: 1;
    height: calc(100% - 8px);
    // background-color: #f8f8f8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    color: gray;
    font-size: 15px;
    position: relative;
    overflow: hidden;
  }
}
</style>
